import React, { Component } from 'react'
import { Button ,Input,Table } from 'antd';
import { DownloadOutlined ,SearchOutlined} from '@ant-design/icons';
export default  class user extends Component{
    constructor(props) {
        super(props);
        this.state = {

        };

    }
    componentDidMount() {

    }

    render(){
        const columns = [
            {
                title: '用户ID',
                dataIndex: 'id',
                key: 'id',
                render: text => <a>{text}</a>,
            },
            {
                title: '用户名',
                dataIndex: 'name',
                key: 'name',
            },
            {
                title: '手机号码',
                dataIndex: 'pho',
                key: 'pho',
            },
            {
                title: '性别',
                dataIndex: 'sex',
                key: 'sex',
            },
            {
                title: '生日',
                dataIndex: 'Birthday',
                key: 'Birthday',
            },
            {
                title: '用户等级',
                dataIndex: 'Grade',
                key: 'Grade',
            },
            {
                title: '状态',
                dataIndex: 'type',
                key: 'type',
            },
        ];

        const data = [
            {
                key: '1',
                id: '1',
                name: "张三",
                pho:15588883333,
                sex:"女",
                Birthday:'1-2',
                Grade:"3",
                type: '可用',
            },
            {
                key: '2',
                id: '2',
                name: "李四",
                pho:15588883333,
                sex:"女",
                Birthday:'1-2',
                Grade:"3",
                type: '可用',
            },
            {
                key: '3',
                id: '3',
                name: "王六",
                pho:1666666666,
                sex:"女",
                Birthday:'1-2',
                Grade:"3",
                type: '可用',
            },
        ];
        const onChange = e => {
            console.log(e);
        };
        return (
            <div>
               <div>
                   <Input className="input fl"  placeholder="请输入用户名"  allowClear onChange={onChange} />
                   <Input className="input fl" placeholder="请输入手机号"  allowClear onChange={onChange} />
                   <Button  type="primary" icon={<SearchOutlined />}>查找</Button>
                   <Button  className="bottom-item" type="primary" icon={<DownloadOutlined />}>导出</Button>
               </div>
               <div className="tablebox">
                   <Table
                       columns={columns}
                       dataSource={data}
                       bordered
                   />
               </div>



            </div>
        )
    }
}
